<header>
    Animation 动画
</header>
<pre tag="css">
    animation: name duration timing-function delay iteration-count direction;
</pre>
<p>
    请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。上面是统一设置，也可以分别设置各个属性：
</p>
<h2>
    animation-name
</h2>
<p>
    规定需要绑定到选择器的 keyframe 名称。
</p>
<p>
    下面是一个定义的 keyframe 例子：
</p>
<pre tag="css">
@keyframes myAnim1 {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}
</pre>
<h2>
    animation-duration
</h2>
<p>
    规定完成动画所花费的时间，以秒或毫秒计。
</p>
<h2>
    animation-timing-function
</h2>
<p>
    规定动画的速度曲线。
</p>
<h2>
    animation-delay
</h2>
<p>
    规定在动画开始之前的延迟。
</p>
<h2>
    animation-iteration-count
</h2>
<p>
    规定动画应该播放的次数。可以是一个数字表示次数，或者是infinite表示无限次（永远）。
</p>
<h2>
    animation-direction
</h2>
<p>
    规定是否应该轮流反向播放动画，可选值包括：
</p>
<table>
    <thead>
        <tr>
            <td>
                值
            </td>
            <td>
                描述
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                normal
            </td>
            <td>
                默认值。动画按正常播放。
            </td>
        </tr>
        <tr>
            <td>
                reverse
            </td>
            <td>
                动画反向播放。
            </td>
        </tr>
        <tr>
            <td>
                alternate
            </td>
            <td>
                动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
            </td>
        </tr>
        <tr>
            <td>
                alternate-reverse
            </td>
            <td>
                动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
            </td>
        </tr>
    </tbody>
</table>
<h2>
    animation-play-state
</h2>
<p>
    指定动画是否正在运行或已暂停，可选值包括：
</p>
<table>
    <thead>
        <tr>
            <td>
                值
            </td>
            <td>
                描述
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                paused
            </td>
            <td>
                指定暂停动画。
            </td>
        </tr>
        <tr>
            <td>
                running
            </td>
            <td>
                指定正在运行的动画。
            </td>
        </tr>
    </tbody>
</table>